<template>

  <div class="top">
    <div class="top-one">
      <div class="top-one-left">
        <div class="title">
          <div class="one">Search or Track Packages</div>
          <div class="two">
            <el-input placeholder="Search USPS.com or Enter a Tracking Number(s)"style="height: 45px;"></el-input>
            <div style="width: 45px;height: 45px;background-color: #ffffff;cursor: pointer;">
              <iconSeachOne class="icon"></iconSeachOne>
            </div>
          </div>
        </div>
      </div>
      <img class="img" src="../../assets/bj.jpg">
    </div>
    <div class="top-two">
      <div class="box">
        <div class="box1" style="border-right:1.5px solid #bbbbbb ;">
          <div class="one">
            <iconClickNShip class="icon"></iconClickNShip>
          </div>
          <div class="two">Click-N-Ship®</div>
          <div class="three">Pay for and print shipping labels.</div>
        </div>
        <div class="box1" style="border-right:1.5px solid #bbbbbb ;">
          <div class="one">
            <iconStampsSupplies class="icon"></iconStampsSupplies>
          </div>
          <div class="two">Stamps & Supplies</div>
          <div class="three">Forever® Stamps: $0.73<br>
            Postcard Stamps: $0.56</div>
        </div>
        <div class="box1">
          <div class="one">
            <iconInformedDelivery class="icon"></iconInformedDelivery>
          </div>
          <div class="two">Informed Delivery®</div>
          <div class="three">Digitally preview your incoming mail.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="body">
    <div class="title">Featured USPS® Products & Services</div>

    <div class="row1">
      <div class="left">
        <div class="left-title" style="left:-100px"><h3 style="margin-top: -13px;">Informed Delivery® 
          <br>Emails</h3></div>
        <div class="text">
          <div>With free Daily Digest emails, you can see previews of letter-sized mail and track packages on the go.</div>
            <div>
              <el-button>Sign Up for Free</el-button>
            </div>
        </div>
      </div>
      <img class="right" src="../../assets/bj.jpg">
    </div>

    <div class="row1">
      <img class="right" src="../../assets/bj.jpg">
      <div class="left">
        <div class="left-title" style="right:-100px"><h3>USPS Ground Advantage</h3></div>
        <div class="text">
          <div>USPS Ground Advantage service has an expected delivery of 2-5 business days and comes with USPS Tracking® service included in the price. It is a perfect option for shppers of all size shipping inside the U.S.</div>
            <div>
              <el-button>Learn More</el-button>
            </div>
        </div>
      </div>
    </div>

    <div class="row1">
      <div class="left">
        <div class="left-title" style="left:-100px"><h3>Moving Soon?</h3></div>
        <div class="text">
          <div>Easily change your address online. You just need to enter a valid email address and pay $1.10 to verify your identity.</div>
            <div>
              <el-button>Change Your Address</el-button>
            </div>
        </div>
      </div>
      <img class="right" src="../../assets/bj.jpg">
    </div>

    <div class="row1">
      <img class="right" src="../../assets/bj.jpg">
      <div class="left">
        <div class="left-title" style="right:-100px"><h3>Need a New Passport?</h3></div>
        <div class="text">
          <div>Use our USPS Retail Customer Appointment Scheduler® to easily choose the best day, time, and Post Office™ location to apply for your new passport.</div>
            <div>
              <el-button>Schedule an Appointment</el-button>
            </div>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="lunbo">
      <div class="box">
        <div class="prev">
        <iconPrev class="icon" @click="arrowClick('prev')"></iconPrev>
      </div>
        <el-carousel arrow="never" style="height: 100%;width: 100%;" :autoplay="false" trigger="click" ref="cardShow">
          <el-carousel-item v-for="item in lunboList" :key="item.index" class="card" style="">
            <div class="one"><img class="img" :src="item.img"/></div>
            <div class="two">{{ item.title }}</div>
            <div class="three">{{ item.text }}</div>
            <el-button class="four">Shop Now</el-button>
          </el-carousel-item>
        </el-carousel>
        <div class="next">
          <iconNext class="icon"  @click="arrowClick('next')"></iconNext>
      </div>
      </div>
    </div>

    <!-- 底部 -->
     <div class="button">
        <div class="one">USPS Updates</div>
        <div class="two">
          <div class="box" style="border-right:1.5px solid #bbbbbb; ">
            <div class="boxOne">Alert: Text & Email Scams</div>
            <div class="boxTwo">If you get a text or email claiming to be from USPS about a package awaiting action or a delivery failure, don't click it: Delete it immediately. This is an attempt to steal your personal information. Find out how to protect yourself.</div>
            <a href="#">Text Scams</a>
            <a href="#">Email Scams</a>
          </div>
          <div class="box">
            <div class="boxOne">Jobs with USPS</div>
            <div class="boxTwo">Find nationwide opportunities to build your career while serving the American public.</div>
            <a href="#">Find Out Mroe</a>
          </div>
        </div>
     </div>
  </div>

  <feet class="foot"></feet>
</template>
<script setup>
import iconSeachOne from '../../assets/icon/seache-one.vue'
import iconClickNShip from '../../assets/icon/click-n-ship.vue'
import iconStampsSupplies from '../../assets/icon/stamps&supplies.vue'
import iconInformedDelivery from '../../assets/icon/informedDelivery.vue'
import iconPrev from '../../assets/icon/prev.vue'
import iconNext from '../../assets/icon/next.vue'
import logo from '../../assets/image/logo.vue'
import feet from '../../components/modules/feet.vue'
import { ref,reactive } from 'vue';

// 数据
const cardShow = ref(null);
// 方法
const arrowClick=(val)=>{
  if (val === 'next') {
    cardShow.value.next();
  } else {
    cardShow.value.prev();
  }
}

//轮播图
const lunboList=ref([
  {
    img:'https://www.usps.com/assets/images/welcome/carousel/sept24-stamps.jpg',
    title:'USPS Stamps',
    text:'Our stamps celebrate life, art, and culture. Find your favorites online.',
    button:''
  },
  {
    img:'https://www.usps.com/assets/images/welcome/carousel/sept24-supply.jpg',
    title:'Forms & Labels',
    text:'Find the right forms and labels you need to send your mail and packages with peace of mind.',
    button:''
  },  
  {
    img:'https://www.usps.com/assets/images/welcome/carousel/autumn-cards.jpg',
    title:'Autumn Notecards',
    text:'Send a thoughtful message to let someone know you care with cards inspired by the Autumn season.',
    button:''
  },  
  {
    img:'https://www.usps.com/assets/images/welcome/carousel/sept24-gifts.jpg',
    title:'Novelty Gifts',
    text:'Find unique gifts for the USPS fan in your life.',
    button:''
  },
])

</script>
<style scoped>
.icon{
  width: 100%;
  height: 100%;
}
.img{
    width: 100%;
    height: 100%;
    /* z-index: 0; */
  }
  .top{
    width: 100%;
    height: 560px;
    min-width: 1170px;
    /* background-color: rgb(133, 80, 10); */
    display: flex;
    flex-direction: column;
    margin: 0 0 60px 0;
  }
  .top-one{
    /* position: absolute; */
    width: 100%;
    height: 390px;
    background-color: violet;
  }
  .top-one-left{
    position: absolute;
    width: 100%;
    left:-50%;
    height: 250px;
    margin: 70px 0;
    background-color: #333366;
    transform: skew(-12deg);
    z-index: 1;
    .title{
      margin: 60px 95px 0 0;
      float:right;
      transform: skew(12deg);
      /* position: absolute; */
      height: 150px;
      width: 450px;
      /* background-color: #2da80e; */
      display: flex;
      flex-direction: column;
      .one{
        float: left;
        font-size: 32px;
        color: #ffffff;
        /* background-color: rgb(138, 138, 63); */
        margin-bottom: 30px;
      }
      .two{
            width: 100%;
            height: 45px;
            /* background-color: violet; */
            display: flex;
          .el-input{
            border: 0;
            float: left;
            width: 405px;
            height: 45px;
          }
            :deep(.el-input__wrapper){
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            box-shadow:0;
          }
      }
    }
  }
  
  .top-two{
    width: 100%;
    height: 170px;
    background-color: rgb(228, 227, 227);
    display:flex;
    /* flex-direction: column; */
    .box{
      margin: 0 auto;
      width: 1264px;
      height: 100%;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      .box1{
        width: 359px;
        height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* background-color: #e4e3e3; */
        .one{
          width: 50px;
          height: 50px;
          margin: 7px 0 0 0;
        }
        .two{
          text-align: center;
          width: 100%;
          height: 30px;
          font-size: 18px;
          font-weight: 600;
          color: #333366;
          line-height: 42px;
        }
        .three{
          margin-top: 6px;
          text-align: center;
          width: 100%;
          height: 70px;
          font-size: 16px;
          color:#000000;
          line-height: 22px;
        }
      }
    }
  }
  .body{
    position: relative;
    margin: 0 auto;
    /* max-width: 1170px; */
    width: 1170px;
    height: 3005px;
    /* background-color: yellowgreen; */
    /* margin: 60px 0; */
    /* top:60px; */
  }
  .title{
    width: 100%;
    height: 50px;
    font-size: 33px;
    font-weight: 550;
    color: #333366;
    text-align: center;
    margin: 0 0 30px 0;
  }
  .row1{
    width: 100%;
    height: 450px;
    margin: 0 0 40px 0;
    /* background-color: violet; */
    display: flex;
    /* flex-direction:row; */
  }
  .right{
    width: 675px;
    height: 450px;
  }
  .left{
    width: 495px;
    height: 450px;
    /* background-color: #722222; */
  }
  .left-title{
    position: absolute;
    margin: 35px 0 0 0;
    /* left: -100px; */
    width: 673px;
    height: 111px;
    background-color: #337AB7;
    transform: skew(-12deg);
    z-index: 22;
    h3{
      left: 100px;
      /* background-color: yellowgreen; */
      position: relative;
      display: inline-block;
      padding: 38px;
      /* overflow:visible; */
      color: #ffffff;
      /* margin-top: 30px; */
      font-size: 32px;
      line-height: 35px;
      margin-bottom: 18px;
    }
  }
  .text{
    width: 100%;
    height: 265px;
    margin-top:185px;
    /* background-color: rgb(31, 39, 16); */
    /* overflow-wrap: break-word; */
    div{
    font-size: 16px;
    line-height: 22px;
      /* background-color: #333366; */
      overflow-wrap: break-word;
      padding-top: 20px;
      margin: 0 38px;
      /* margin-top: 20px; */
    }
  }
  .el-button{
    background-color: #333366;
    font-size: 16px;
    font-weight: 800;
    color: #d6d6d6;
    width: 275px;
    height: 42px;
    border: 0;
  }
  .el-button:hover{
    background-color: #d6d6d6;
    color: #333366;
  }
  .lunbo{
    width: 100%;
    height: 500px;
    /* background-color: #336637; */
    
    position: relative;
    .box{
      /* position: relative; */
      margin: 0 auto;
      width: 1000px;
      height: 100%;
      /* background-color:yellow; */
      :deep(.el-carousel__indicators button) {
        width: 19px;
        height: 19px;
        background-color: #ffffff;
        /* border-radius: 50%; */
        border: 2px solid #333366;
        border-radius: 20px;
      }

      :deep(.el-carousel__indicator.is-active button){

      background-color: #333366 !important;

      border: 0;
      }
      .prev {
      position: absolute;
      left: 120px;
      top: 200px;
      width: 90px;
      height: 90px;
      z-index: 111;
    }

    .next {
      position: absolute;
      right: 120px;
      top: 200px;
      width: 90px;
      height: 90px;
      z-index: 111;
    }

    .card{
      width: 700px;
      height: 500px;
      /* background-color: #ffffff; */
      margin: 0 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .one{
        width: 100%;
        height: 220px;
        /* background-color: yellow; */
      }
      .two{
        width: 100%;
        height: 60px;
        margin-top: 20px;
        /* background-color: violet; */
        text-align: center;
        font-size: 32px;
        line-height: 36px;
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #333366;
      }
      .three{
        width: 100%;
        height: 100px;
        /* background-color: turquoise; */
        text-align: center;
        line-height: 22px;
        font-size: 16px;
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #000000;
      }
      .four{
        margin-top: 10px;
      }
    }
    }
  }
  .button{
    width: 100%;
    height: 400px;
    /* background-color: #d6d6d6; */
    display: flex;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
    .one{
      width: 100%;
      height: 50px;
      font-size: 33px;
      font-weight: 550;
      color: #333366;
      /* background-color: yellow; */
      text-align: center;
    }
    .two{
      width: 801px;
      height: 350px;
      /* background-color: #33b750; */
      margin-top: 25px;
      display: flex;
      flex-direction: row;
      .box{
        width: 400px;
        height: 100%;
        /* background-color: violet; */
        
        display: flex;
        flex-direction: column;
        .boxOne{
          width: 100%;
          height: 50px;
          /* background-color: yellow; */
          font-size: 22px;
          font-weight: 700;
          color: #333366;
          line-height: 24px;
          padding-top: 20px;
          padding-left: 10px;
          margin-bottom: 0;
        }
        .boxTwo{
        /* background-color: whitesmoke; */
        overflow-wrap: break-word;
        font-size: 16px;
        line-height: 22px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 20px 0 10px;
        padding-bottom: 10px;
        }
        a{
          font-size: 14px;
          line-height: 16px;
          font-weight: 600;
          margin-top: 16px;
          color: #337ab7;
          padding-top: 5px;
          padding-left: 10px;
          padding-bottom: 5px;
        }
      }
    }
  }
  .foot{
    width: 100%;
    height: 430px;
    background-color: #e4e4e4;
  }
</style>